<template>
  <div class="Customer">
    <div class="Customer-body">
      <div class="Customer-body-header">
        <img
          src="http://5b0988e595225.cdn.sohucs.com/images/20180115/d6e8df20dcef43aea0125dc3ddd3fdd1.jpeg"
          height="40px"
          style="
            max-width: 120px;
            margin-right: 10px;
            float: left;
            margin-top: 4px;
            border-radius: 2px;
          "
          alt="头像"
        />
        <p class="Customer-body-header-name">唯一旅拍</p>
        <p class="Customer-body-header-txt">您好！专属客服在线，诚挚为您服务</p>
        <p
          class="Customer-body-header-state"
          style="right: 150px"
          v-text="showState"
        ></p>
        <el-button
          class="Customer-List-open Customer-body-header-state btns"
          style="right: 20px; top: 12px"
          @click="openAdmin"
          >选择客服</el-button
        >
      </div>
      <div class="Customer-body-content-ringht">
        <div class="content-right-top">
          <div
            class="content-right-top-com_intro font14 color-grey-deep active"
          >
            关于我们
          </div>
          <!-- 公司简介 -->
          <div class="content-right-top-kf_intro font14 color-grey-deep">
            客服名片
          </div>
          <!-- 客服简介 -->
        </div>
        <div class="content-right-mid-wrap">
          <div class="content-right-mid">
            <div class="content-right-com_content">
              <div class="company-content font12">
                <p>
                  <img src="../../../public/img/content-1.png" />
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="content-right-guanggao">
          <div class="content-right-guanggao-innerWrap js_hide_guanggao">
            <ul class="guanggao-wrap">
              <li class="1">
                <a href="http://www.bj520.com/" target="_blank"
                  ><img src="../../../public/img/content-2.jpg" alt=""
                /></a>
              </li>
              <li class="1">
                <a href="http://www.bj520.com/" target="_blank"
                  ><img src="../../../public/img/content-2.jpg" alt=""
                /></a>
              </li>
            </ul>
            <div class="guanggao-bottom" style="display: none">
              <span class="dotWrap">
                <i class="dot active"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="Customer-body-content">
        <div class="Customer-body-content-left">
          <div class="Customer-body-content-left-talk">
            <div class="Customer-body-content-left-talk-main">
              <div
                class="Customer-body-content-left-talk-main-wapper"
                v-if="UserInfo.radio == 'user'"
                ref="wapper"
              >
                <div
                  v-if="showState === '未连接'"
                  class="Customer-body-content-left-talk-main-wapper-title"
                >
                  请先选择客服
                </div>
                <div
                  v-else
                  class="Customer-body-content-left-talk-main-wapper-both"
                  v-for="(item, index) in messageList"
                  :key="index"
                >
                  <div
                    class="Customer-body-content-left-talk-main-wapper-both-User"
                    v-if="item.type == 2"
                  >
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-User-img"
                    >
                      <img :src="item.icon" width="60" height="60" />
                    </div>
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-User-txt"
                    >
                      <p>
                        <em>客服：{{ item.name }}</em>
                        <span>21:11:34</span>
                      </p>
                      <div
                        class="Customer-body-content-left-talk-main-wapper-both-User-txt-content"
                        v-html="item.msg"
                      >
                        {
                      </div>
                    </div>
                  </div>
                  <div
                    class="Customer-body-content-left-talk-main-wapper-both-Admin"
                    v-else-if="item.type == 1"
                  >
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-Admin-img"
                    >
                      <img :src="item.icon" width="60" height="60" />
                    </div>
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-Admin-txt"
                    >
                      <p>
                        <em>用户：{{ item.name }}</em>
                        <span>21:11:34</span>
                      </p>
                      <div
                        class="Customer-body-content-left-talk-main-wapper-both-Admin-txt-content"
                        v-html="item.msg"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="Customer-body-content-left-talk-main-wapper"
                ref="wapper"
                v-if="UserInfo.radio == 'admin'"
              >
                <div
                  v-if="showState === '未连接'"
                  class="Customer-body-content-left-talk-main-wapper-title"
                >
                  暂时没有需要服务的客户
                </div>
                <div
                  v-else
                  class="Customer-body-content-left-talk-main-wapper-both"
                  v-for="(item, index) in messageList"
                  :key="index"
                >
                  <div
                    class="Customer-body-content-left-talk-main-wapper-both-User"
                    v-if="item.type == 1"
                  >
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-User-img"
                    >
                      <img :src="item.icon" width="60" height="60" />
                    </div>
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-User-txt"
                    >
                      <p>
                        <em>用户：{{ item.name }}</em>
                        <span>21:11:34</span>
                      </p>
                      <div
                        class="Customer-body-content-left-talk-main-wapper-both-User-txt-content"
                        v-html="item.msg"
                      ></div>
                    </div>
                  </div>
                  <div
                    class="Customer-body-content-left-talk-main-wapper-both-Admin"
                    v-else-if="item.type == 2"
                  >
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-Admin-img"
                    >
                      <img :src="item.icon" width="60" height="60" />
                    </div>
                    <div
                      class="Customer-body-content-left-talk-main-wapper-both-Admin-txt"
                    >
                      <p>
                        <em>客服：{{ item.name }}</em>
                        <span>21:11:34</span>
                      </p>
                      <div
                        class="Customer-body-content-left-talk-main-wapper-both-Admin-txt-content"
                        v-html="item.msg"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Customer-body-content-listButton">
            <div class="talk-function-bar">
              <div class="svgWrap">
                <label class="changeColor-wrap">
                  <div class="changeColor-wrap-both" v-show="IsShowiconList">
                    <iconList
                      v-bind:InputValue.sync="InputValue"
                      :IsShowiconList.sync="IsShowiconList"
                    ></iconList>
                  </div>
                  <div class="changeColor-wrap-icon" @click="showIconList">
                    <svg
                      data-title="表情"
                      class="function-icon icon-face"
                      width="24px"
                      height="24px"
                      viewBox="0 0 24 24"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g
                        id="Page-1"
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                      >
                        <g id="Imported-Layers-Copy-7">
                          <rect
                            id="Rectangle-3"
                            x="0"
                            y="0"
                            width="24"
                            height="24"
                          />
                          <path
                            class="svgColor"
                            d="M5,12 C5,15.8656805 8.1343195,19 12,19 C15.8656805,19 19,15.8656805 19,12 C19,8.1343195 15.8656805,5 12,5 C8.1343195,5 5,8.1343195 5,12 Z M3,12 C3,7.02975 7.02975,3 12,3 C16.97025,3 21,7.02975 21,12 C21,16.97025 16.97025,21 12,21 C7.02975,21 3,16.97025 3,12 Z"
                            id="Combined-Shape"
                            fill="#466080"
                            fill-rule="nonzero"
                          />
                          <path
                            class="svgColor"
                            d="M9,8 C8.172,8 7.5,8.672 7.5,9.5 C7.5,10.328 8.172,11 9,11 C9.828,11 10.5,10.328 10.5,9.5 C10.5,8.672 9.828,8 9,8"
                            id="Fill-2"
                            fill="#466080"
                          />
                          <path
                            class="svgColor"
                            d="M15,8 C14.172,8 13.5,8.672 13.5,9.5 C13.5,10.328 14.172,11 15,11 C15.828,11 16.5,10.328 16.5,9.5 C16.5,8.672 15.828,8 15,8"
                            id="Fill-2-Copy"
                            fill="#466080"
                          />
                          <path
                            class="svgColor"
                            d="M9.55730755,18.9802954 C12.5582692,18.9802954 15.0860829,16.7646048 15.4989445,13.8196019 C15.5756198,13.2726656 15.1943979,12.7671285 14.6474616,12.6904532 C14.1005252,12.6137779 13.5949881,12.9949998 13.5183128,13.5419361 C13.2434436,15.5026194 11.5576081,16.9802954 9.55730755,16.9802954 C9.0050228,16.9802954 8.55730755,17.4280106 8.55730755,17.9802954 C8.55730755,18.5325801 9.0050228,18.9802954 9.55730755,18.9802954 Z"
                            id="Oval-26"
                            fill="#466080"
                            fill-rule="nonzero"
                            transform="translate(12.033030, 15.830470) rotate(39.000000) translate(-12.033030, -15.830470) "
                          />
                        </g>
                      </g>
                    </svg>
                  </div>
                </label>

                <label
                  class="upload_box function-icon-disabled"
                  style="position: relative; width: 24px; height: 24px"
                >
                  <!--  -->
                  <svg
                    t="1569331085247"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2564"
                    width="24"
                    height="24"
                  >
                    <path
                      d="M832 864H192c-51.2 0-96-44.8-96-96V256c0-51.2 44.8-96 96-96h640c51.2 0 96 44.8 96 96v512c0 51.2-44.8 96-96 96zM192 224c-19.2 0-32 12.8-32 32v512c0 19.2 12.8 32 32 32h640c19.2 0 32-12.8 32-32V256c0-19.2-12.8-32-32-32H192z"
                      p-id="2565"
                    />
                    <path
                      d="M608 409.6a1 1 0 1 0 128 0 1 1 0 1 0-128 0zM768 678.4c-57.6-44.8-83.2-32-121.6-12.8-25.6 12.8-64 25.6-115.2 19.2-64-12.8-89.6-57.6-108.8-96-12.8-25.6-25.6-51.2-51.2-64-64-32-121.6 6.4-121.6 6.4-19.2 12.8-44.8 6.4-51.2-6.4-6.4-12.8 0-38.4 12.8-44.8 6.4 0 89.6-57.6 185.6-12.8 44.8 25.6 64 57.6 83.2 89.6 19.2 32 32 57.6 70.4 64 25.6 6.4 44.8 0 70.4-12.8 44.8-19.2 96-44.8 185.6 25.6 19.2 12.8 19.2 38.4 12.8 44.8-12.8 6.4-25.6 19.2-51.2 0z"
                      p-id="2566"
                    />
                  </svg>
                  <!--  -->
                  <div
                    data-title="发送文件及图片"
                    class="function-icon webuploader-container"
                    id="file-picker"
                  >
                    <div class="webuploader-pick"></div>
                    <div
                      id="rt_rt_1djtskq1h17gl125a1pn1ed21voq1"
                      style="
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 24px;
                        height: 24px;
                        overflow: hidden;
                        bottom: auto;
                        right: auto;
                      "
                    >
                      <form id="filefrom">
                        <input
                          type="file"
                          name="file"
                          class="function-icon webuploader-container-file"
                          multiple="multiple"
                          style="height: 24px; width: 24px"
                          @change="changepic"
                          accept="image/jpg, image/jpeg, image/png, image/PNG"
                          id="fileImg"
                          ref="fileImg"
                          @click="clickpic"
                        />
                      </form>
                      <label
                        style="
                          opacity: 0;
                          width: 100%;
                          height: 100%;
                          display: block;
                          cursor: pointer;
                          background: rgb(255, 255, 255);
                        "
                      ></label>
                    </div>
                  </div>
                  <!-- 发送文件及图片 -->
                </label>
              </div>
              <el-button
                class="Customer-List-open btns"
                style="top: -10px; right: -700px; position: relative"
                @click="OutScoket"
                >退出</el-button
              >
            </div>
          </div>

          <div
            class="Customer-body-content-value"
            hidefocus="true"
            frameborder="0"
          >
            <div
              class="Customer-body-content-value-body"
              contenteditable="true"
              v-html="InputValue"
              @keyup.enter="
                () => {
                  sendMessage();
                }
              "
              @compositionend="InputValueHanderCompositionend"
              @compositionstart="InputValueHanderCompositionstart"
              @input="InputValueHanderInput"
              @keydown="InputValueKeydown"
              id="message_text"
            ></div>
          </div>
          <div class="Customer-body-content-value-body-botton">
            <!-- <p class="toDeveloperP">感谢光临</p> -->
            <el-button
              @click="
                () => {
                  sendMessage();
                }
              "
              @keyup.enter="
                () => {
                  sendMessage();
                }
              "
              type="info"
              >发送</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div v-if="UserInfo.radio == 'user'" class="Customer-List">
      <el-button
        class="Customer-List-open"
        style="top: 250px; right: 90vw"
        v-if="formData"
        @click="openComment"
        >提交订单并且评论</el-button
      >

      <el-drawer
        title="在线客服"
        :visible.sync="drawer"
        :before-close="handleClose"
        class="Customer-List-open-admin"
      >
        <div class="Customer-List-info">
          <el-table
            :data="AdminListInfo"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @row-click="ItemClick"
          >
            <el-table-column
              prop="name"
              label="客服名称"
              width="280"
            ></el-table-column>
            <el-table-column
              prop="state"
              label="客服状态"
              width="280"
            ></el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import iconList from "../../components/conn/icon";
import moment from "moment";
export default {
  data() {
    return {
      InputValue: "",
      UserInfo: {},
      socketInfo: {},
      AdminListInfo: [],
      drawer: false,
      messageList: [
        {
          type: 2,
          msg: "亲，有什么可以帮助你的吗？",
          icon: "/img/userico.jpg",
          name: "客服管理",
          time: moment().format("hh:mm:ss"),
        },
      ],
      toUser: "",
      toAdmin: "",
      showState: "未连接",
      formData: "",
      IsShowiconList: false,
      flog: true,
    };
  },
  sockets: {
    AdminListInfo(data) {
      this.AdminListInfo = data;
    },
    ChoiceAdminNotice(data) {
      this.showState = `和用户${data.name}连接`;
      this.toUser = {
        name: data.name,
        uid: data.uid,
      };
      this.messageList = data.messageList;
      this.$message({
        message: data.msg,
        type: "success",
      });
    },
    sendAdminMesssage(data) {
      this.messageList.push({
        type: 1,
        msg: data,
        icon: "/img/adminioc.jpg",
        name: this.socketInfo.name,
        tiem: moment().format("hh:mm:ss"),
      });
      this.$nextTick(() => {
        this.wapperContent();
      });
    },
    sendUserMessage(data) {
      this.messageList.push({
        type: 2,
        msg: data,
        icon: "/img/userico.jpg",
        name: this.socketInfo.name,
        tiem: moment().format("hh:mm:ss"),
      });
      this.$nextTick(() => {
        this.wapperContent();
      });
    },
    newUserMessage(data) {
      this.messageList.push({
        type: 1,
        msg: data,
        icon: "/img/adminioc.jpg",
        name: this.toAdmin.name,
        tiem: moment().format("hh:mm:ss"),
      });
      this.$nextTick(() => {
        this.wapperContent();
      });
    },
    newAdminMesssage(data) {
      this.messageList.push({
        type: 2,
        msg: data,
        icon: "/img/userico.jpg",
        name: this.toUser.name,
        tiem: moment().format("hh:mm:ss"),
      });
      this.$nextTick(() => {
        this.wapperContent();
      });
    },
    disconnect() {
      this.showState = `未连接`;
      this.$message({
        message: `用户${this.toUser.name}断开连接`,
        type: "success",
      });
      this.toUser = null;
    },
    AdminDown() {
      this.$message.error({
        message: `客服${this.toAdmin.name}断开连接`,
      });
      this.showState = "未连接";
      this.messageList = [
        {
          type: 2,
          msg: "亲，有什么可以帮助你的吗？",
          icon: "/img/userico.jpg",
          name: "客服管理",
          tiem: moment().format("hh:mm:ss"),
        },
      ];
      this.toAdmin = null;
    },
    UserDown() {
      this.$message.error({
        message: `用户${this.toUser.name}断开连接`,
      });
      this.showState = "未连接";
      this.messageList = [
        {
          type: 2,
          msg: "亲，有什么可以帮助你的吗？",
          icon: "/img/userico.jpg",
          name: "客服管理",
          tiem: moment().format("hh:mm:ss"),
        },
      ];
      this.toUser = null;
    },
  },
  mounted() {
    this.delSocketInfoAction();
    if (this.getUSerName.radio == "admin") {
      //这是管理员
      this.$message({
        message: `欢迎你${this.getUSerName.username}管理`,
        type: "success",
      });
      if (this.getSocketInfo) {
      } else {
        this.socketInfo = {
          name: this.getUSerName.username,
          uid: "web_im_" + moment().valueOf(),
          radio: this.getUSerName.radio,
        };
        this.saveSocketInfoAction(this.socketInfo);
        this.$socket.emit("newAdmin", this.socketInfo);
      }
    } else {
      //这是一个用户
      this.$message({
        message: `欢迎你${this.getUSerName.username}用户`,
        type: "success",
      });
      if (this.getSocketInfo) {
      } else {
        this.socketInfo = {
          name: this.getUSerName.username,
          uid: "web_im_" + moment().valueOf(),
          radio: this.getUSerName.radio,
        };
        this.saveSocketInfoAction(this.socketInfo);
        this.$socket.emit("newUser", this.socketInfo);
      }
    }
    this.UserInfo = this.getUSerName;
    this.$socket.emit("getAdminInfo", (data) => {
      this.AdminListInfo = data;
    });
  },
  methods: {
    sendMessage() {
      if (this.showState != "未连接") {
        this.$socket.emit("newMessage", this.InputValue);
        this.InputValue = "";
      } else {
        this.$message.error({
          message: "未建立连接，无法发送信息",
        });
      }
    },
    ...mapActions(["saveSocketInfoAction", "delSocketInfoAction"]),
    handleClose() {
      this.drawer = false;
    },
    openAdmin() {
      this.drawer = true;
    },
    outAdmin() {
      if (!this.toAdmin) {
        return;
      }
      this.$confirm("是否与该客服的连接？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$socket.emit("outAdmin");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选择",
          });
        });
    },
    OutScoket() {
      if (!this.toAdmin) {
        this.$router.push({ path: "/home" });
        return;
      }
      this.$confirm("是否退出连接？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          var _this = this;
          this.$socket.emit("outAdmin");
          this.$router.push({ path: "/home" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选择",
          });
        });
    },
    tableRowClassName(row) {
      if (row.row.state == "等待") {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    ItemClick(row) {
      if (this.toAdmin) {
        this.$message.error({
          message: "当前存在客服为你服务",
        });
        return;
      }
      this.$confirm("是否选择该客服咨询？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (row.state != "等待") {
            this.$message.error({
              message: "该客服正在服务别人",
            });
            return;
          }
          this.$message({
            type: "success",
            message: "选择成功!",
          });
          this.drawer = false;
          this.$socket.emit(
            "ChoiceAdmin",
            {
              uid: row.uid,
              name: row.name,
              messageList: this.messageList,
            },
            (data) => {
              this.toAdmin = {
                uid: row.uid,
                name: row.name,
              };
              this.showState = `和客服${data.name}连接`;
              this.$message({
                message: data.msg,
                type: "success",
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选择",
          });
        });
    },
    wapperContent() {
      this.$refs.wapper.scrollTop =
        this.$refs.wapper.scrollHeight - this.$refs.wapper.offsetHeight;
      //   console.log((this.$refs.wapper.scrollHeight-this.$refs.wapper.offsetHeight)+20,this.$refs.wapper.scrollTop)
    },
    openComment() {},
    showIconList() {
      if (!(this.toAdmin || this.toUser)) {
        return;
      }
      this.IsShowiconList = !this.IsShowiconList;
    },
    InputValueHanderInput(e) {
      setTimeout(() => {
        if (this.flog) {
          this.InputValue = e.target.innerHTML;
          this.$nextTick(() => {
            this.Focus();
          });
        }
      }, 0);
    },
    InputValueHanderCompositionend() {
      this.flog = true;
    },
    InputValueHanderCompositionstart() {
      this.flog = false;
    },
    Focus() {
      // 始终聚焦在文本末尾
      var el = document.getElementById("message_text");
      //el=el[0];  //jquery 对象转dom对象
      el.focus();
      if ($.support.msie) {
        var range = document.selection.createRange();
        // this.last = range;
        // range.moveToElementText(el);
        range.select();
        document.selection.empty(); //取消选中
      } else {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      }
    },
    changepic(e) {
      if (!(this.toAdmin || this.toUser)) {
        return;
      }
      var _this = this;
      let file = e.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        _this.InputValue +=
          '<component  is="viewer"><img src="' +
          this.result +
          '" alt=""  style="max-width: 100px;max-height: 100px;"/></component>';
        _this.$refs.fileImg.value = "";
      };
    },
    clickpic(e) {
      if (!(this.toAdmin || this.toUser)) {
        e.stopPropagation();
        return false;
      }
    },
    InputValueKeydown(event) {
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false);
      return false;
    },
  },
  computed: {
    ...mapGetters({
      getUSerName: "getUSerName",
      getSocketInfo: "getSocketInfo",
    }),
  },
  created() {
    if (JSON.stringify(this.$route.params) != "{}") {
      this.formData = this.$route.params;
      let HtmlStr =
        "<ul>" +
        "<li>客户名称:" +
        this.formData.name +
        "</li>" +
        "<li>跟拍摄影师:" +
        this.formData.region +
        "</li>" +
        "<li>预定时间:" +
        moment().format("YYYY-MM--DD", this.formData.date1) +
        "</li>" +
        "<li>所在城市:" +
        (this.formData.provinceValue +
          "-" +
          this.formData.cityValue +
          "-" +
          this.formData.areaValue) +
        "</li>" +
        "<li>旅行资费:" +
        Object.values(this.formData.type).slice("、") +
        "</li>" +
        "<li>旅游机构:" +
        this.formData.resource +
        "</li>" +
        "<li>旅游地区:" +
        Object.values(this.formData.valueList).slice("、") +
        "</li>" +
        "<li>个人想法:" +
        this.formData.desc +
        "</li>" +
        "</ul>";
      this.messageList.push({
        type: 2,
        msg: HtmlStr,
        icon: "/img/userico.jpg",
        name: "客服管理",
        time: moment().format("hh:mm:ss"),
      });
    }
  },
  components: {
    iconList,
  },
};
</script>

<style lang='scss'>
.Customer {
  padding: 0;
  box-sizing: border-box;
  background-image: url("/img/bg.jpg");
  background-size: 100vw 100vh;
  /* background-color: red; */
  width: 100vw;
  height: 100vh;
  .Customer-body {
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -300px;
    position: absolute;
    width: 800px;
    height: 600px;
    .Customer-body-header {
      background: rgb(119, 119, 119);
      position: absolute;
      left: 1px;
      top: 0;
      width: 100%;
      padding-right: 241px;
      height: 60px;
      padding-top: 6px;
      z-index: 20;
      .Customer-body-header-name {
        font-size: 16px;
        height: 24px;
        line-height: 24px;
        color: #ffffff;
        letter-spacing: 0;
      }
      .Customer-body-header-txt {
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        color: #ffffff;
        letter-spacing: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .Customer-body-header-state {
        font-size: 16px;
        position: absolute;
        top: 20px;
        right: 40px;
        color: #ffffff;
      }
    }
    .Customer-body-content {
      border: 1px solid #000;
      overflow: hidden;
      margin-top: 4px;
      font-size: 0;
      height: 100%;
      width: 100%;
      padding-top: 60px;
      .Customer-body-content-left {
        position: relative;
        width: 100%;
        height: 65%;
        border: 1px solid red;
        padding-right: 240px;
        .Customer-body-content-left-talk {
          height: 100%;
          width: 100%;
          .Customer-body-content-left-talk-main {
            overflow: auto;
            box-sizing: border-box;
            position: relative;
            padding: 0;
            height: 100%;
            .Customer-body-content-left-talk-main-wapper {
              .Customer-body-content-left-talk-main-wapper-title {
                position: absolute;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
                margin: auto;
                font-size: 40px;
                text-align: center;
                padding-top: 200px;
                /* background-color: #cccccc; */
              }
              height: 100%;
              width: 100%;
              overflow-x: hidden;
              overflow-y: auto;
              .Customer-body-content-left-talk-main-wapper-both {
                /* min-height: 100%; */
                width: 100%;
                .Customer-body-content-left-talk-main-wapper-both-User {
                  margin-top: 20px;
                  display: flex;
                  padding-left: 10px;
                  .Customer-body-content-left-talk-main-wapper-both-User-img {
                    img {
                      border-radius: 50%;
                    }
                  }
                  .Customer-body-content-left-talk-main-wapper-both-User-txt {
                    margin-left: 20px;
                    font-size: 14px;
                    p {
                      display: flex;
                      align-items: center;
                      font-size: 12px;
                      color: #62778c;
                      margin-bottom: 5px;
                      height: 18px;
                      em {
                        margin-right: 10px;
                        max-width: 370px;
                        overflow: hidden;
                        display: inline-block;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      }
                      span {
                        font-size: 12px;
                        color: #62778c;
                      }
                    }
                    .Customer-body-content-left-talk-main-wapper-both-User-txt-content {
                      max-width: 512px;
                      min-width: 20px;
                      background-color: rgb(239, 243, 246);
                      border-radius: 8px 8px 8px 8px;
                      line-height: 20px;
                      padding: 10px 10px;
                      font-size: 12px;
                    }
                  }
                }
                .Customer-body-content-left-talk-main-wapper-both-Admin {
                  margin-top: 20px;
                  display: flex;
                  flex-direction: row-reverse;
                  padding-left: 10px;
                  .Customer-body-content-left-talk-main-wapper-both-Admin-img {
                    img {
                      border-radius: 50%;
                    }
                  }
                  .Customer-body-content-left-talk-main-wapper-both-Admin-txt {
                    margin-right: 20px;
                    font-size: 14px;
                    p {
                      display: flex;
                      align-items: center;
                      font-size: 12px;
                      color: #62778c;
                      margin-bottom: 5px;
                      flex-direction: row-reverse;
                      height: 18px;
                      em {
                        margin-left: 10px;
                        max-width: 370px;
                        overflow: hidden;
                        display: inline-block;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      }
                      span {
                        font-size: 12px;
                        color: #62778c;
                      }
                    }
                    .Customer-body-content-left-talk-main-wapper-both-Admin-txt-content {
                      display: flex;
                      max-width: 512px;
                      min-width: 20px;
                      background-color: rgb(239, 243, 246);
                      border-radius: 8px 8px 8px 8px;
                      line-height: 20px;
                      padding: 10px 10px;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
        }
        .Customer-body-content-listButton {
          position: relative;
          background: #f8fafc;
          height: 40px;
          border-top: 1px solid #e9eef2;
          border-bottom: 1px solid #e9eef2;
          padding-left: 10px;
          .talk-function-bar {
            padding-left: 10px;
            height: 10%;
            width: 100%;
            padding-top: 8px;
            label {
              margin: 0px 5px;
            }
            .svgWrap {
              height: 100%;
              .changeColor-wrap {
                position: relative;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin: 0;
                padding: 0;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                line-height: 1.5;
                .changeColor-wrap-both {
                  position: absolute;
                  width: 200px;
                  height: 208px;
                  padding: 0;
                  background-color: #fff;
                  color: #666;
                  display: inline-block;
                  top: -239px;
                  left: -21px;
                  z-index: 19891018;
                }
                .changeColor-wrap-icon {
                  cursor: pointer;
                  height: 24px;
                  width: 24px;
                  display: inline-block;
                }
              }
              .upload_box {
                position: relative;
                width: 24px;
                height: 24px;
              }
              .function-icon-disabled {
                display: inline-block;
                .webuploader-container {
                  .webuploader-container-file {
                    position: absolute;
                    z-index: 100;
                    opacity: 0;
                    filter: Alpha(opacity=0);
                  }
                }
              }
            }
          }
        }
        .Customer-body-content-value {
          width: 100%;
          height: 120px;
          border: 0;
          margin: 0;
          padding: 0;
          /* background-color: red; */
          overflow: auto;
          .Customer-body-content-value-body {
            height: 100px;
            width: 779px;
            font-size: 13px;
            word-wrap: break-word;
            padding: 5px 10px;
            margin-left: -1px;
            overflow-x: hidden;
            resize: none;
          }
        }
        .Customer-body-content-value-body-botton {
          height: 70px;
          text-align: right;
          button {
            height: 40px;
            width: 60px;
            font-size: 14px;
            background-color: transparent;
            color: #ffffff;
            outline: none;
            margin-right: 70px;
            width: 100px;
            line-height: 40px;
            text-align: center;
            position: relative;
            span {
              height: 100%;
              display: inline-block;
              width: 100%;
              /* margin-top: -5px; */
              position: absolute;
              top: -2px;
              left: 0px;
            }
          }
        }
      }
      .Customer-body-content-ringht {
        font-size: 0px;
      }
    }
  }
  .Customer-List {
    position: relative;
    .Customer-List-open {
      position: absolute;
      right: 0px;
      top: 40px;
      font-size: 20px;
      background-color: transparent;
      width: 200px;
      color: #000;
      padding: 20px;
      cursor: pointer;
    }
  }
}
.Customer-List-open-admin {
  .el-drawer__body {
    overflow-x: scroll;
    /* overflow-y: hidden; */
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
}
.btns {
  background: transparent;
  border: none;
  &.el-button:hover,
  &.el-button:active,
  &.el-button:focus {
    background: transparent;
  }
}
.Customer-body-content-ringht {
  float: left;
  width: 240px;
  vertical-align: top;
  position: absolute;
  right: -242px;
  top: 0;
  height: 93%;
  padding-top: 66px;
  z-index: 0;
  .content-right-mid-wrap {
    background: #fff;
    height: 100%;
    width: 100%;
    padding-top: 40px;
    .content-right-mid {
      height: 57%;
      width: 100%;
      color: #28334b;
      letter-spacing: 0;
      line-height: 20px;
      overflow: auto;
      .content-right-com_content {
        width: 100%;
        img {
          padding: 10px;
          width: 91%;
        }
      }
    }
  }
  .content-right-top {
    height: 40px;
    position: absolute;
    left: 0;
    top: 66px;
    width: 100%;
    background: #ffffff;
    & > div {
      cursor: pointer;
      text-align: center;
      display: inline-block;
      line-height: 40px;
      letter-spacing: 0;
    }
    .content-right-top-com_intro {
      border-bottom: 1px solid #dde5ed;
      width: 100%;
      font-size: 14px;
      color: #28334b;
      letter-spacing: 0;
    }
    .content-right-top-kf_intro {
      width: 50%;
      border-bottom: 1px solid #dde5ed;
      border-left: 1px solid #dde5ed;
      display: none;
    }
  }
}
.font12 {
  font-size: 12px;
  letter-spacing: 0.6px;
}
.content-right-guanggao {
  overflow: hidden;
  height: 155px;
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  .content-right-guanggao-innerWrap {
    margin: 0 10px;
    height: 100%;
    position: relative;
    border-top: 1px solid #dde5ed;
    overflow: hidden;
  }
  .content-right-guanggao ul {
    position: absolute;
    left: 0;
    top: 10px;
    width: 880px;
    height: 150px;
    overflow: hidden;
  }
}
</style>